<template>
  <div class="sort">
    <ul theme>
      <li>商城首页</li>
      <li>国家馆</li>
      <li>拼单</li>
      <li>求购</li>
      <li>峰会</li>
    </ul>
    <div class="product-sort">
      <div class="sort-list-container" @mouseleave="activeList = -1">
        <ul class="sort-list-wrapper">
          <li
            v-for="(item, index) in sortList"
            @mouseenter="activeList = index"
            class="iconfont"
            :class="`icon-sort${index + 1} ${activeList === index ? 'active': ''}`"
          >{{item}}</li>
          <li theme class="title iconfont icon-list">全部分类</li>
        </ul>
        <div
          themeBorder-1
          class="list-detail"
          v-for="(item, index) in sortList"
          :class="index === activeList ? 'show-detail' : 'hide-detail'"
        >
          <!-- v-show="index === activeList" -->
          <div class="sort-detail-container">
            {{item}}
            {{item}}
            {{item}}
            {{item}}
            {{item}}
            {{item}}
          </div>
          <div class="brand-container">
            <div v-for="i in 8">
              <img src="">
            </div>
          </div>
        </div>
      </div>



      <div class="swiper-wrapper">
        <!-- 轮播图 -->
      </div>
      <div class="login-wrapper">
        <p class="title">Hi, 早上好</p>
        <p class="title">欢迎来到百思凯</p>
        <button themeLinear>登录</button>
        <button theme2 themeBorder-1>注册</button>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'Sort',
  data () {
    return {
      activeList: -1,
      sortList: [
        '休闲零食',
        '酒水饮料',
        '乳制品',
        '方便速食',
        '冲调饮品',
        '肉类海鲜',
        '厨房调料',
        '粮油干货'
      ],
      showDetailFlag: 0
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.sort {
  background: #E2E2E2;
  margin-bottom: 1.6rem;
  &>ul {
    display: flex;
    justify-content: center;
    height: 1rem;
    line-height: 1rem;
    li {
      cursor: pointer;
      width: 4rem;
      text-align: center;
      color: #fff;
      transition: all .3s;
      font-size: .36rem;
    }
    li:first-child {
      margin-left: 4rem;
    }
    li:hover {
      background: rgba(255, 255, 255, .2);
    }
  }
  .product-sort {
    display: flex;
    justify-content: center;
    height: 9.2rem;
    .sort-list-container {
      position: relative;
      display: flex;
      width: 4rem;
      .sort-list-wrapper {
        width: 100%;
        background: #fff;
        position: relative;
        li {
          height: 1rem;
          line-height: 1rem;
          cursor: pointer;
          font-size: .34rem;
          transition: all .3s;
          text-indent: .4rem;
          &:before {
            font-size: .4rem;
            font-weight: bolder;
            color: #FB5005;
            margin-right: .2rem;
          }
        }
        li:last-child {
          width: 100%;
          position: absolute;
          top: -1rem;
          color: #fff;
          z-index: 1;
          background: #E44600;
          &:before {
            font-size: .4rem;
            color: #fff;
          }
        }
        .active {
          background: #FB5005;
          color: #fff;
          &:before {
            color: #fff;
          }
        }
      }
      .list-detail {
        position: absolute;
        margin-left: 100%;
        flex: none;
        width: 15rem;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        transition: all .5s;
        .sort-detail-container {
          background: #fff;
          width: 10.2rem;
          flex: none;
          box-sizing: border-box;
          padding: .4rem;
        }
        .brand-container {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: space-between;
          box-sizing: border-box;
          padding: .4rem;
          div {
            width: 1.8rem;
            height: 1.8rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .show-detail {
        animation: start .5s;
        @keyframes start {
          0% {opacity: .8;top: .4rem;bottom: -.3rem;}
          100% {opacity: 1;top: 0rem;bottom: 0rem;}
        }
      }
      .hide-detail {
        opacity: 0;
      }
    }
    .swiper-wrapper {
      width: 15rem;
      background: #eee;
    }
    .login-wrapper {
      width: 5rem;
      display: flex;
      flex-direction: column;
      background: #fff;
      box-sizing: border-box;
      padding: .5rem;
      .title {
        text-align: center;
        line-height: .6rem;
      }
      button {
        margin-top: .32rem;
      }

    }

  }
}
</style>